<template xmlns="">
	<div class="hot">
		<div class="s">
			<div class="head">
				<span>热门</span>
				<div class="box"></div>
				<button class="btn1" @click="go">BACK</button>
				<div class="btn2">
					<Icon type="md-search" size="19"/>
				</div>
				<div class="headrs" :style="bat">
					<List>
						<ListItem>
							<template slot="extra">
								<button class="pos" @click="tiao">
									<Icon type="ios-arrow-back"/>
								</button>
							</template>
							<ListItemMeta/>
							<template slot="extra">
								<button @click="fan">
									<Icon type="ios-arrow-forward"/>
								</button>
							</template>
						</ListItem>
					</List>
				</div>
			</div>
		</div>
		<div class="z">
			<div class="head">
				<span>
					今日最热
				</span>
			</div>
			<div class="shop">
				<div style="height: 153px;width: 100%;">
					<div style="width: 94%; height: 90%; margin-left: 3%">
						<Carousel autoplay v-model="setting.autoplaySpeed" loop style="width: 100%; height: 100%;color: red"
								  arrow="never" dots="none">
							<CarouselItem>
								<div>
									<div style="width: 48%; height: 10%;text-align: center;float: left;">
											<img :src="'/static/img/police.png' " alt="">
										<Row>
											<Col span="24" style="margin: 10px">
												<Rate v-model="valueText"/>
											</Col>
										</Row>
									</div>
									<div style="width: 48%; height: 10%;text-align: center; float: right;">
										<img :src="'/static/img/king.png'" alt="">
										<Row>
											<Col span="24" style="margin: 10px">
												<Rate v-model="valueText"/>
											</Col>
										</Row>
									</div>
								</div>
							</CarouselItem>
							<CarouselItem>
								<div>
									<div style="width: 48%; height: 10%;text-align: center;float: left;">
										<img :src="'/static/img/police.png' " alt="">
										<Row>
											<Col span="24" style="margin: 10px">
												<Rate v-model="valueText"/>
											</Col>
										</Row>
									</div>
									<div style="width: 48%; height: 10%;text-align: center; float: right;">
										<img :src="'/static/img/king.png'" alt="">
										<Row>
											<Col span="24" style="margin: 10px">
												<Rate v-model="valueText"/>
											</Col>
										</Row>
									</div>
								</div>
							</CarouselItem>
						</Carousel>
					</div>
				</div>
				<i-form style=" width: 100%;">
					<FormItem class="sli">
						<Slider v-model="setting.autoplaySpeed" :min="first" :max="tia" :step="ge"></Slider>
					</FormItem>
				</i-form>
			</div>

		</div>
		<div class="x">
			<div class="head">
				月月热
			</div>
			<div class="fol">
				<div class="img1" :style="picture"></div>
				<div class="img1">
					<div class="img2" :style="pictures"></div>
					<div class="img2" :style="pictures"></div>
				</div>
				<div class="img1" :style="picture"></div>
			</div>
		</div>
		<div class="foot">
			<div class="btn3" v-if="popup">
				<div class="btn4">
					<button>
						<Icon type="md-settings" size="35"/>
					</button>
				</div>
				<div class="btn">
					<button>
						<Icon type="md-person" size="35"/>
					</button>
				</div>
				<div class="btn4">
					<button>
						<Icon type="ios-reverse-camera" size="35"/>
					</button>
				</div>
			</div>
			<button class="btn7" :style="btn" @click="info"></button>
		</div>
	</div>
</template>

<script>
	export default {
		name: "Discount",
		data() {
			return {
				btn: "background-image: url('" + require("../../assets/superman.png") + "')",
				popup: false,
				bat: "background-image: url('" + require("../../assets/super.png") + "')",
				picture: "background-image: url('/static/img/kill.png' )",
				pictures: "background-image: url('/static/img/king.png' )",
				pictured: "background-image:url('/static/img/police.png' )",
				setting: {
					autoplay: false,
					autoplaySpeed: 0,
					dots: 'inside',
					radiusDot: false,
					trigger: 'click',
					arrow: 'hover'
				},
				valueText: 2,
				value2:0,
				first:0,
				tia: 1,
				ge: 1,

			}
		},
		mounted() {

		},
		methods: {
			info() {
				if (this.popup) {
					this.popup = false
				} else {
					this.popup = true
				}
			},
			add() {
				if (this.percent >= 100) {
					return false;
				}
				this.percent += 10;
			},
			minus() {
				if (this.percent <= 0) {
					return false;
				}
				this.percent -= 10;
			},
			go() {
				return this.$router.push('/users/index')
			},
			tiao() {
				return this.$router.push('/users/discount')
			},
			fan() {
				return this.$router.push('/users/rank')
			}
		}
	}
</script>
<style lang="less">
	.hot {
		max-width: 1024px;
		max-height: 1366px;
		margin: auto;

		.ivu-list-item {
			padding-top: 35px;
		}

		.ivu-form-item-label {
			padding: 0;
		}

		.s {
			width: 100%;
			height: 146px;
			background-color: white;

			.headrs {
				position: relative;
				width: 100%;
				height: 111px;
				background-repeat: no-repeat;
				background-size: 170px;
				background-position: 60%;
				color: blue;

				.pos {
					position: absolute;
					left: 0;
				}

				button {
					background: white;
					border: 0px;
					color: #046BAF;
				}
			}
		}

		.ivu-slider-wrap {
			margin: 24px 0;
		}

		.z {
			width: 100%;
			height: 240px;

			.shop {
				width: 100%;
				height: 205px;
				overflow: auto;

				.sli {
					width: 90%;
					margin: auto;
				}

				 img{
					width: 100%;
					height: 136px;
				}

				.yh {
					width: 100%;
					height: 50%;
					border: 1px solid #F0F0F0;

					.cen {
						line-height: 1.5;
						width: 44%;
						height: 100%;
						float: left;
					}

					.rig {
						height: 100%;
						width: 28%;
						float: left;
						background-size: 100px;
						background-repeat: no-repeat;
						background-position: center;
					}
				}
			}

		}

		.z > .head {
			padding: 0;
		}

		.x {
			width: 100%;
			height: 246px;

			.head {
				padding: 0;
			}

			.fol {
				height: 211px;
				width: 100%;

				.img2 {
					width: 100%;
					height: 49%;
					margin: 1% 0;
					float: left;
					border: 1px solid #F0F0F0;
					background-size: 100px;
					background-repeat: no-repeat;
					background-position: center;
				}

				.img1 {
					border: 1px solid #F0F0F0;
					width: 32%;
					height: 100%;
					margin-left: 1%;
					float: left;
					background-size: 20px;
				}

				overflow: auto;
			}
		}

		.foot {
			height: 35px;
			color: #FEFE00;
			width: 100%;
			background: #016AAE;
			font-size: 22px;
			text-align: center;
			line-height: 1.5;
			position: relative;

			.btn3 {
				margin: auto;
				margin-top: -90px;
				width: 50%;
				height: 125px;
				background-color: rgba(0, 0, 0, 0.5);
				float: left;
				margin-left: 25%;
				/*clear: both;*/
				border-radius: 50%;

				.btn4 {
					width: 33%;
					height: 75px;
					float: left;
					margin-top: 35px;

				}

				button {
					width: 80%;
					height: 50px;
					border-radius: 50%;
					line-height: 0px;
					background-color: white;
					border: 5px solid #016AAE;
					color: #016AAE;
				}

				.btn {
					margin-top: 10px;
					width: 33%;
					height: 75px;
					float: left;
				}
			}

			.btn7 {
				width: 60px;
				height: 60px;
				position: absolute;
				left: 42%;
				top: -25px;
				border-radius: 50%;
				text-align: center;
				border: 0;
				background-repeat: no-repeat;
				background-position: 60%;
				background-size: 73px 75px;
			}
		}

		.head {
			height: 35px;
			color: white;
			width: 100%;
			background: #016AAE;
			font-size: 22px;
			text-align: center;
			padding-right: 10px;
			line-height: 1.5;
			position: relative;
		}

		.head > .btn2 {
			height: 25px;
			width: 25px;
			float: right;
			margin-top: 5px;
			text-align: center;
			padding-top: 3px;
			line-height: 0px;
			background-color: white;
			color: #016AAE;
			border-radius: 5px;
		}

		.box {
			width: 0;
			height: 0;
			margin-top: 7px;
			float: left;
			border-top: 11px solid transparent;
			border-bottom: 11px solid transparent;
			border-left: 11px solid transparent;
			border-right: 11px solid white;
			/*background-color:#FEFE00 ;*/
		}

		.clear {
			clear: both;
		}

		.btn1 {
			background: white;
			font-size: 10px;
			margin-top: 7px;
			margin-left: -1px;
			color: #016AAE;
			height: 22px;
			padding: 0px 5px;
			border: 1px aliceblue solid;
			border-radius: 10%;
			cursor: pointer;
			float: left;
		}
	}

</style>